import React, {PureComponent} from "react";
import {BannerWrapper, Center, Focusinfo} from '../style';
import {scrollAnimation} from '../../../lib/auth';
import axios from "axios";

class Banner extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            info: []
        };
    }

    render() {
        const {banner, innerHeight} = this.props;
        const {introduction} = this.props.userInfo.toJS();
        const {info} = this.state;
        return (
            <BannerWrapper>
                <div className="waveWrapper waveAnimation">
                    <div className="waveWrapperInner bgTop">
                        <div className="wave waveTop"/>
                    </div>
                    <div className="waveWrapperInner bgMiddle">
                        <div className="wave waveMiddle"/>
                    </div>
                    <div className="waveWrapperInner bgBottom">
                        <div className="wave waveBottom"/>
                    </div>
                </div>
                <div className='headertop-down animated'>
                    <span onClick={headertop_down}><i className='iconfont icon-chevrondown'/></span>
                </div>
                <Center style={{backgroundImage: banner, height: innerHeight + 'px'}}>
                    <Focusinfo>
                        <div className='header-tou'>
                            <img src='https://media.inyaa.cn/99db72d3abaaef4beece7e9f94b3623.jpg'  alt=''/>
                        </div>
                        <div className='header-info'>
                            <p className='ellipsis'>
                                <span>{introduction || 'ありふれたあの日々をただ思い返す'}</span>
                            </p>
                        </div>
                        <div className='top-social'>
                            <li onClick={this.props.getBanner}>
                                <img src='https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/display_icon/muh2/pre.png' alt=""/>
                            </li>
                            {
                                info.map((item, index) => {
                                    return (
                                        <li className='link' key={index}>
                                            <a href={item.url} target={'_blank'} rel="noopener noreferrer">
                                                <img src={item.icon} alt=""/>
                                            </a>
                                        </li>
                                    )
                                })
                            }
                            <li onClick={this.props.getBanner}>
                                <img src='https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/display_icon/muh2/next.png' alt=""/>
                            </li>
                        </div>
                    </Focusinfo>
                </Center>
            </BannerWrapper>
        )
    }

    componentDidMount() {
        axios.get('/social/list').then((res) => {
            if (res.success) {
                let array = [];
                for (let i = 0; i < res.data.length; i++) {
                    array.push({
                        show: false,
                        icon: res.data[i].icon,
                        url: res.data[i].url,
                    })
                }
                this.setState({
                    info: array
                })
            }
        });
    }
}

function headertop_down() {
    const content = document.getElementById('content').offsetTop;
    scrollAnimation(0, content);
}

export default Banner
